<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--    <link rel="stylesheet" th:href="@{css/jquery.mobile-1.4.5.min.css}">-->
<!--    <link rel="stylesheet" th:href="@{css/chat.css}">-->
<!--    <script th:src="@{js/jquery.js}"></script>-->
<!--    <script th:src="@{js/jquery.mobile-1.4.5.min.js}"></script>-->
<!--    <script th:src="@{js/chat.js}"></script>-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{css/jquery.sinaEmotion.css}" />-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{css/chat_other.css}"/>-->
    <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/jquery.mobile.flatui.css}" />
</head>
<body>
<!--<div data-role="page">-->
<!--    <div data-role="header" data-position="fixed">-->
<!--        <img th:src="@{images/logo.png}" alt="" class="logo">-->
<!--        <h1 class="txt">姓名</h1>-->
<!--        <p class="net">手机在线-4G</p>-->
<!--    </div>-->

<!--    <div data-role="main" class="ui-content">-->
<!--        <div class="chatContainer" id="chatContainer">-->
            <div data-role="content" class="container" id="chatBox" role="main">
                <ul class="content-reply-box mg10" id="showMessage"></ul>

            </div>
            <div class="chatFooter" data-role="footer" data-position="fixed">
<!--                <div class="oporation"><span class="icon emotion" id="emotion"><img th:src="@{images/emotion.png}"/></span></div>-->
                <div class="chatInput">
                    <textarea class="message-input" id="messageInput"></textarea>
                    <input id="sendMessage" class="send" type="submit" value="发送"/>
                </div>
            </div>
                <input type="text" th:value="${username}" id="username" style="display: none"/>
                <input type="text" th:value="${tousername}" id="tousername" style="display: none"/>
        </div>



<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery.sinaEmotion.js}"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0-rc.1.js"></script>
<script type="text/javascript">

    var webSocket;
    var commWebSocket;
    if ("WebSocket" in window) {

        webSocket = new WebSocket("ws://localhost:8081/websocket/"+$("#username").val());
        //console.log(${username});

        //连通之后的回调事件
        webSocket.onopen = function () {


            console.log("已经连通了websocket");
        }

            webSocket.onmessage = function (evt){
                var received_msg = evt.data;
                console.log("数据已接收:" + received_msg);
                var obj = JSON.parse(received_msg);
                console.log("可以解析成json:" + obj.messageType);

                if (obj.messageType == 1) {
                    //把名称放入到selection当中供选择
                   console.log("websocket链接")

                } else if (obj.messageType == 2) {

                    var onlineName = obj.onlineUsers;
                    var offlineName = obj.username;
                    console.log(offlineName + "下线了");

                } else if (obj.messageType == 3) {
                    var onlineName = obj.onlineUsers;
                    for (var i = 0; i < onlineName.length; i++) {
                        if (!(onlineName[i] == document.getElementById('username').value)) {
                            console.log(onlineName)
                        }
                    }
                }
                else {

                        setMessageInnerHTML('<li class="odd"> <a class="user" href="#"><img name="pic" class="img-responsive avatar_" src="images/icon02.png" alt=""><span class="user-name"></span></a> <div class="reply-content-box"> <span class="reply-time">'+getTime()+'</span> <div class="reply-content pr"> <span class="arrow">&nbsp;</span>'+obj.textMessage+'</div> </div> </li>'
                        );


            };

            //连接关闭的回调事件
            webSocket.onclose = function () {
                console.log("连接已关闭...");

            };
            }

    }
    else
        { console.log("连接失败");}

    function setMessageInnerHTML(innerHTML) {
        document.getElementById('showMessage').innerHTML += innerHTML+'<br/>' ;
    }

    $("#sendMessage").click(onclick,function send() {
        var selectText = $("#onLineUser").find("option:selected").text();
        if (selectText == "--所有--") {
            selectText = "All";
        } else {
            setMessageInnerHTML('<li class="even"> <a class="user" href="#"><img name="pic" class="img-responsive avatar_" src="images/icon02.png" alt=""><span class="user-name"></span></a> <div class="reply-content-box"> <span class="reply-time">'+getTime()+'</span> <div class="reply-content pr"> <span class="arrow">&nbsp;</span>'+$("#messageInput").val() +'</div> </div> </li>')


        }
        var message = {
            "message": document.getElementById('messageInput').value,
            "username": $("#username").val(),
            "to": $("#tousername").val()
        };
        webSocket.send(JSON.stringify(message));

    })


        var isScroll=false;
        $('#showMessage').scroll(function(){
            var scrollHeight=$('#chatBox')[0].scrollHeight-$('#chatBox').outerHeight();
            if($('#chatBox').scrollTop()<scrollHeight){
                isScroll=true;
            }else{
                isScroll=false;
            }
        });

        function getTime() {
            var today = new Date();
            var y = today.getFullYear();
            var mo = today.getMonth()+1;
            var d = today.getDate();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            return y + '/' + mo + '/' + d + ' ' + h + ':' + m + ':' + s;
        }

        //
        // jQuery.fn.extend({
        //     enter: function(fn){
        //         $(this).bind('keydown',function(event){
        //             var e = event || window.event;
        //             if(!e.ctrlKey &&!e.shiftKey&& e.keyCode ==13){
        //                 if(typeof(fn)!='undefined'){
        //                     fn.call(this);
        //                     //这句话阻止原有的回车换行事件的冒泡执行
        //                     return false;
        //                 }
        //             }
        //         });
        //         return this;
        //     }
        // });
        // $('#messageInput').enter(function(){
        //     send();
        // });

</script>
</body>

</html>